<template>
  <template v-for="(feeDetailItem, feeDetailIndex) in feeOption.childrenList" :key="feeDetailIndex">
    <ve-card :showDivider="feeDetailIndex != feeOption.childrenList.length - 1" v-if="feeDetailItem.childrenList?.length > 0">
      <template #title>
        <div class="title-box">
          {{ feeDetailItem.feeName }}
        </div>
      </template>
      <template v-if="feeOption.feeCategory == 5 || feeOption.feeCategory == 12">
        <template v-for="item in feeDetailItem.childrenList" :key="item.itemName">
          <template v-if="feeDetailItem.feeName != '已结算费用退款'">
            <ve-form-item :label="item.showItemName || item.itemName" size="1/2" unit="元">
              <ve-input-number v-model="item.amount" :precision="2" />
            </ve-form-item>
          </template>
          <template v-else>
            <ve-card
              v-if="!(feeOption.feeCategory == 12 && item.payAmount == item.refundAmount)"
              :title="item.showItemName || item.itemName"
              class="custom-card"
              :showDivider="false"
            >
              <ve-form-item v-if="item.payAmount" label="实结" :borderBottom="false" disabled>{{ item.payAmount }} 元</ve-form-item>
              <ve-form-item v-if="item.refundAmount" label="已退" :borderBottom="false" disabled>{{ item.refundAmount }} 元</ve-form-item>
              <ve-form-item label="退款" :borderBottom="false" unit="元">
                <ve-input-number v-model="item.amount" :precision="2" />
              </ve-form-item>
            </ve-card>
          </template>
        </template>
      </template>
      <template v-else>
        <ve-form-item :label="feeDetailItem.showItemName || feeDetailItem.itemName" size="1/2">
          <ve-input-number v-model="feeDetailItem.amount" />
        </ve-form-item>
      </template>
    </ve-card>
  </template>
</template>
<script setup lang="ts">
  import { orderFeeRefund } from '@/api/order/sOrder'
  import { onLoad } from '@dcloudio/uni-app'

  import { computed, inject } from 'vue'

  const orderInfo: any = inject('addFeeOrderInfo')

  const props = defineProps({
    index: {
      type: Number,
      default: 0,
    },
    list: {
      type: Array,
      default: () => [],
    },
    fromPage: {
      type: String,
      default: '',
    },
  })

  const feeOption = computed<any>(() => {
    return props.list[props.index]
  })

  // 获取已结算费用退款
  const getRefundFee = (options: any) => {
    if (feeOption.value.feeCategory == 5) {
      feeOption.value.childrenList = [
        {
          feeName: '额外费用退款',
          childrenList: feeOption.value.childrenList,
        },
      ]
      if (orderInfo.value.orderStatus != -100) {
        orderFeeRefund({ id: options.id }).then((res: any) => {
          const result = res.result.map((item: any) => {
            return {
              costType: 20,
              amount: props.fromPage == 'returnCar' ? undefined : item.payAmount - item.refundAmount || null,
              feeType: 12,
              itemName: `退款-${item.itemName}`,
              payAmount: props.fromPage == 'returnCar' ? undefined : item.payAmount,
              refundAmount: props.fromPage == 'returnCar' ? undefined : item.refundAmount,
              statics: true,
            }
          })
          feeOption.value.childrenList.unshift({
            feeName: '已结算费用退款',
            childrenList: result,
          })
        })
      }
    }
  }

  onLoad((options) => {
    getRefundFee(options)
  })
</script>
<style lang="less" scoped>
  .title-box {
    display: flex;
    align-items: center;
  }
  .custom-card {
    padding: 12px 12px;
    margin-bottom: 12px !important;
    background-color: #f7f8fa;

    &:last-child {
      margin-bottom: 0 !important;
    }
  }
</style>
